<script>
import {apiCategoryList, apiProductPage, apiUserDetail} from "@/api/api";
import ProductList from "@/views/ProductList.vue";

export default {

  name: "UserInfo",
  components: {ProductList},
  props: ['userId'], // 直接从 props 获取
  created() {
    this.loadUserDetail();
    this.loadCategoryList();
    this.loadProductData();
  },
  computed:{
    activeIndex() {
      // 根据当前路由路径返回对应的 index
      const routeMap = {
        '用户发布的商品': '1',
        '用户评价': '2',
      };
      return routeMap[this.$route.path] || '1';
    },
    isMe(){
      return JSON.parse(localStorage.getItem('user')).id === this.userDetail.id;
    }
  },
  data(){
    return{
      activeTab: "publish",
      userOK : false,
      userDetail: null,
      search: {
        categoryId : null,
        pageNum: 1,
        pageSize: 10,
        keyword: null,
        sellerId:null
      },
      productList:[],
      categories:[
        {id: 1, name: "分类1"},
        {id: 2, name: "分类2"},
      ],
    }
  },
  methods:{
    handleSelect(key, keyPath) {

    },
    async loadUserDetail() {
      const promise = await apiUserDetail(this.userId);
      console.log(promise);
      if (promise.code === 200) {
        this.userDetail = promise.data;
        this.userOK = true;
      } else {
        this.$message.error("获取用户信息失败");
      }
    },
    // 获取分类数据
    loadCategoryList(){
      apiCategoryList().then(res => {
        if (res.code === 200){
          this.categories = res.data;
        }else{
          this.$message.error(`商品类型列表请求失败 ${res.message}`);
        }
      });
    },
    loadProductData(){
      this.search.sellerId = this.userId;
      apiProductPage(this.search).then(res=>{
        if(res?.code===200){
          this.productList = res.data.records
          this.total = res.data.total
        }else{
          this.$message.error(`商品数据列表请求失败 ${res.message}`)
        }
      })
    },
    onSendMessage(){
      this.$router.push({
        name: 'message', // 路由名称
        params: { userId: this.userId } // 传递参数
      })
    }
  }
}
</script>

<template>
  <div class="user-info-bg">
    <el-backtop target=".user-info-bg"></el-backtop>
    <el-card class="info-card" shadow="always">
      <div>
        <div style="display: flex;align-items: center;justify-content: right">
          <div v-if="userOK" style="display: flex;align-items: center;margin-bottom: -1rem;gap: 1rem;height: 100%">
            <el-button plain type="primary" @click="onSendMessage" :disabled="isMe">
              <i class="el-icon-chat-line-round" style="margin-right: 0.5rem"></i>私信
            </el-button>
            <el-avatar :src="userDetail.avatar">
            </el-avatar>
            <span style="font-size: 1rem; color: black">{{ userDetail.username }}</span>
          </div>
          <el-skeleton v-else :rows="5" animated />
        </div>
        <div class="info-nav">
            <el-tabs v-model="activeTab" @tab-click="handleSelect">
              <el-tab-pane label="用户发布的商品" name="publish">
                <product-list :border="false" :custom-style="{background: 'none', padding: 0, borderRadius:'0', margin:0}"
                              :seller-id="userId" :show-publish="false"/>
              </el-tab-pane>
              <el-tab-pane label="用户评价" name="common">配置管理</el-tab-pane>
            </el-tabs>
        </div>
      </div>

    </el-card>
  </div>


</template>

<style scoped lang="less">
.user-info-bg{
  height: 100%;
  background: url("@/assets/bg/bg.png") center;
  background-size: cover;
  padding: 32px 1rem 1rem;
  margin: 0 0 0;
  overflow: auto;
}
.info-card{
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(64,158,255,0.08);
  padding: 0;
}
.info-nav{
  width: auto;
}
</style>